<template>
  <div class="cart">
    <div class="hasGoods" v-if="gShow">
      
      <p class="allTitle"><a onclick="window.history.go(-1)"></a>收货地址</p>

      <div v-if="!addressShow" class="address">
          <div class="goAdd" @click="goAdd">添加收货地址</div>
      </div>
      
      <router-link v-if="addressShow" class="address" tag="div" to="address">
          <p class="listTop">收货人：{{address.username}}<span class="tel">{{address.mobile}}</span></p>
          <p class="listCont" v-if="address.province.name==address.city.name">收货地址：{{address.province.name}}{{address.address}}</p>
          <p class="listCont" v-else>收货地址：{{address.province.name}}{{address.city.name}}{{address.region.name}}{{address.address}}</p>
      </router-link>


      <div class="cartInfo">
        <ul>
          <li v-for="(item,index) in List">
            <img :src="ksrc+item.goods_logo">
            <div class="info">
              <p class="sTitle">{{item.goods_name}}</p>
              <p class="sNum">¥{{item.goods_price}}*{{item.goods_count}}</p> 
            </div>
          </li>
        </ul>
      </div>
      <div class="clickBox">
          <button @click="goOreder">提交订单</button>
          <span class="num">合计 :<em> ¥{{num}}</em></span>
      </div>

    </div>

  </div>
</template>

<script>

import axios from 'axios'
import {Get,Put,Delete,Post} from '@/config/api.js'
export default {
  name: 'cart',
  data () {
    return {
      gShow:true,//购物车是否有商品
      allClick:false,//是否全选
      List:[],
      getList:[],
      ksrc:'http://oub2urxei.bkt.clouddn.com/',
      addressShow:false,
      address:'',
      good:[],
      number:[],
      cart:[],
      sNum:0
    }
  },
  created(){
  },
  mounted(){
    this.getData()
    this.getAdd()
  },
  computed:{
    cartx:function(){
      for(var i=0;i<this.List.length;i++){
          this.cart.push(this.List[i].id)
      }
      return this.cart
    },
    goods:function(){
      for(var i=0;i<this.List.length;i++){
          this.good.push(this.List[i].goods_id)
      }
      return this.good
    },
    numbers:function(){
      for(var i=0;i<this.List.length;i++){
          this.number.push(this.List[i].goods_count)
      }
      return this.number
    },
    num:function(){
      for(var i=0;i<this.List.length;i++){
          this.sNum+=parseInt(this.List[i].goods_count*this.List[i].goods_price)
      }
      return this.sNum
    }
  },
  methods:{
    //设置收货地址
    goAdd(){
      this.$router.push('/addressAdd')
    },
    //确认订单
    goOreder(){
      if(this.addressShow){
          let that=this
          let data={
            "goods_ids":this.goods,
            "goods_counts":this.numbers,
            "address_id":this.address.id
          }
          Post('/order',this.$store.state.token,data).then(function(){
            alert('下单成功')
            that.clearCart()
            that.$router.push('/order')
          })
        }
    },
    //清空购物车
    clearCart(){
        Delete('/carts/'+this.cartx,this.$store.state.token)
    },
    //获取订单信息
    getData(){
        let that=this
        Get('/carts',this.$store.state.token).then(function(reg){
          that.List=reg.data
        })
    },
    //获取用户地址
    getAdd(){
        let that=this
        Get('/users/address?_include=province,city,region',this.$store.state.token).then(function(reg){
          for(let i=0;i<reg.data.length;i++){
            if(reg.data[i].is_default==1){
              that.address=reg.data[i]
              that.addressShow=true
            }
          }
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped="" type="text/css">

$vw:750;
@function h($px){@return $px/$vw*100vw}

.allTitle{text-align: center;line-height: h(90);font-size: h(36);color:#38b6f0;background: #fff;margin-bottom: h(20);position: relative;}
.allTitle a{width: h(90);height: h(90);position: absolute;left: 0;top: 0;background: url('/static/images/heiBack.png') no-repeat;background-size: 100%;}

.cart{padding-bottom: h(110)}
.title{height: h(70);background: #f0eff5;font-size: h(30);padding:0 h(30);color: #38b6f0;line-height: h(70)}
.cartInfo .click{width: h(60);float: left;height: h(166);display: block;background: url('/static/images/out.png') 10% 50% no-repeat;background-size: 50%}
.cartInfo .click.active{background: url('/static/images/on.png') 10% 50% no-repeat;background-size: 50%}
.cartInfo ul li{background: #fff;position: relative;overflow: hidden;padding:h(25);margin-bottom: h(20)}
.cartInfo ul li img{width: h(166);height: h(166);float: left}
.cartInfo ul li .info{float: left;width: h(430);padding-left: h(30)}
.cartInfo .sTitle{font-size:h(32)}
.cartInfo .sPrce{font-size: h(30);color: #fd7b58;line-height: 1.6}

.sNum{height: 2.5rem;background: #fff;width: 100%;display: flex;align-items: center;}
.sNum span{font-size: h(60);display: inline-block;width: h(50);height: h(50);color: #999999;border: #999999 solid 1px;display: inline-block;line-height: h(60);vertical-align: center;}
.sNum span.less{background: url('/static/images/less.png') no-repeat;background-size: 100%;}
.sNum span.add{background: url('/static/images/add.png') no-repeat;background-size: 100%;}
.sNum input{width: h(100);background: #fff;height: h(48);border: #999999 solid 1px;border-radius: h(4);text-align: center;margin: 0 h(10);display: inline-block;vertical-align: center;}


.clickBox{height: h(100);line-height: h(100);background: #fff;padding-left:h(25);font-size: h(36)}
.clickBox .click{width: h(160);float: left;height: h(100);display: block;background: url('/static/images/out.png') 2% 50% no-repeat;background-size: auto 30%;padding-left: h(60)}
.clickBox .active{background: url('/static/images/on.png') 2% 50% no-repeat;background-size: auto 30%;}
.clickBox button{float: right;background: #fd7b58;width: h(280);height: 100%;border: none;font-size: h(36);color: #fff;text-indent: center}
.clickBox .num{padding-right: h(10)}
.clickBox .num em{color: #fd7b58;font-style:normal }

.cartBg{text-align: center;padding-top: h(80)}
.cartBg em{width: h(319);height: h(252);background: url('/static/images/cart.png');background-size: 100%;display: block;margin: auto;}
.cartBg p{font-size: h(36);color:#c8c7c9;margin-top: h(30)}
.cartBg a{display: block;font-size: h(30);width: h(280);height:h(70);line-height: h(70);border-radius: h(8);background: #fd7b58;color: #fff;text-decoration: none;text-align: center;margin: auto;margin-top: h(70);}

.address{background: #fff;margin-bottom: h(30);padding: h(10) 0}
.address .goAdd{text-align: center;font-size:h(26);line-height:3}
.listTop{line-height: h(70);font-size: h(36);padding: 0 h(30)}
.listTop span{font-size: h(32);float: right}
.listCont{padding: h(10) 0 h(20) 0;font-size: h(32);margin: 0 h(30)}
</style>



